<!DOCTYPE html>
<html lang="zh-CN">

{[template "__head.html"]}

<body>
<div id="app">

    {[template "__navbar.html"]}

    <div class="container-fluid">
        <div class="row">

            {[template "__sidebar.html" .]}

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <h4><b>{{slave}} 主机进程列表</b></h4>
                <button type="button" class="btn btn-default" @click="ReturnPG()">返回</button>
                <button type="button" class="btn btn-default" @click="ImagesRefresh()" >刷新数据</button>
                <div class="table-responsive">
                    <table class="table table-hover" style="word-break:break-all; word-wrap:break-all;">
                        <thead>
                        <tr>
                            <th style="width: 10%;">Pid</th>
                            <th style="width: 10%;">pname</th>
                            <th style="width: 10%;">ppid</th>
                            <th style="width: 10%;">tty</th>
                            <th style="width: 20%;">cmd</th>
                            <th style="width: 10%;">user</th>
                            <th style="">Time</th>
                            <th style="">Stime</th>
                            <th style="">C</th>
                            <th style="">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in process">
                            <td>{{item.pid}}</td>
                            <td>{{item.pname}}</td>
                            <td>{{item.ppid}}</td>
                            <td>{{item.tty}}</td>
                            <td>{{item.cmd}}</td>
                            <td>{{item.user}}</td>
                            <td>{{item.Time}}</td>
                            <td>{{item.Stime}}</td>
                            <td>{{item.C}}</td>
                            <td>
                                <button type="button" class="btn btn-default btn-sm">暂停</button>
                                <button type="button" class="btn btn-default btn-sm">继续</button>
                                <button type="button" class="btn btn-default btn-sm" @click="Stop(item)">终止</button>
                                <button type="button" class="btn btn-default btn-sm" @click="ForceStop(item)">强制终止</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <nav>
                    <ul class="pager">
                        <li><a type="button" class="btn btn-default" @click="LastPG()">上一页</a></li>
                        <li><a type="button" class="btn btn-default" @click="NextPG()">下一页</a></li>
                    </ul>
                </nav>


            </div>
        </div>
    </div>
</div>

{[template "__js.html"]}
{[template "__init_js.html"]}

<!-- 引入 echarts.js -->
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            url : new Url(),
            slave: "{[.slave]}",
            msg: "{[.Msg]}",
            slave_list: {},
            process: {},
            pg: 1,
        },
        methods: {
            GetSlaveList:function (){
                const t = this;
                AjaxRequestText(t.url.SlaveSelect(), {}, "GET", function(d){
                    //console.log(d);
                    var jsonObj = JSON.parse(d);
                    t.slave_list = jsonObj.body.data;
                });
            },

            Switch: function (){
                var newSlave = $('#switch_slave').val();
                console.log(newSlave);
                window.location.href="/slave/process/"+newSlave;
            },

            GetSlaveProcess: function (){
                const t = this;
                AjaxRequestText(t.url.SlaveProcessList(t.slave, t.pg), {}, "GET", function(d){
                    //console.log(d);
                    var jsonObj = JSON.parse(d);
                    t.process = jsonObj.body.data;
                    console.log(t.process);
                });
            },

            ReturnPG: function(){
                const t = this;
                window.location.href="/slave/"+t.slave;
            },

            LastPG: function (){
                const t = this;
                t.pg = t.pg-1;
                t.GetSlaveProcess();
            },

            NextPG: function (){
                const t = this;
                t.pg = t.pg+1;
                t.GetSlaveProcess();
            },

            Stop: function (item){
                const t = this;
                AjaxRequestText(t.url.SlaveProcessKill(t.slave, item.pid, "15"), {}, "GET", function(d){
                    //console.log(d);
                    var jsonObj = JSON.parse(d);
                    console.log(jsonObj);
                    Alert(dObj.body.data, jsonObj.msg);
                });
            },

            ForceStop: function (item){
                const t = this;
                AjaxRequestText(t.url.SlaveProcessKill(t.slave, item.pid, "9"), {}, "GET", function(d){
                    //console.log(d);
                    var jsonObj = JSON.parse(d);
                    console.log(jsonObj);
                    Alert(dObj.body.data, jsonObj.msg);
                });
            },

        },
        created:function(){
            console.log("created");
            console.log(this.slave);
            this.GetSlaveList();
            this.GetSlaveProcess();
            WSConnectNotice();
        },
        mounted:function(){

        },
    })

</script>

</body>
</html>